<template>
  <el-row>
    <el-col :span="4">
      <el-row>
        <el-input v-model="deptName" placeholder="请填写部门名称"></el-input>
      </el-row>
      <el-row>
        <el-tree :data="deptTreeData" node-key="id" :default-expand-all="true" @node-click="handleTreeNodeClick"/>
      </el-row>
    </el-col>
    <el-col :span="19" :offset="1">
      <el-row>
        <el-form :inline="true" :model="queryAccountForm" class="demo-form-inline">
          <el-form-item label="登录账号">
            <el-input v-model="queryAccountForm.accountName" placeholder="请填写登录账号"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model="queryAccountForm.mobile" placeholder="请填写手机号码"></el-input>
          </el-form-item>
          <el-form-item label="账号状态">
            <el-select v-model="queryAccountForm.status" placeholder="请选择账号状态">
              <el-option label="正常" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="createTimeRange" type="datetimerange" start-placeholder="开始时间"
                            end-placeholder="结束时间"/>
          </el-form-item>
          <el-form-item>
            <!--            v-permission="'sys:account:list'"-->
            <el-button type="primary" @click="onQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-button v-permission="'sys:account:save'" type="primary" :icon="Plus" @click="handleAddAccount">新增
        </el-button>
      </el-row>
      <el-row>
        <el-table :data="accountTableData" style="width: 100%; margin-bottom: 20px">
          <el-table-column prop="id" label="索引" width="220"/>
          <el-table-column prop="accountName" label="账号" width="180"/>
          <el-table-column prop="nickName" label="昵称" width="180"/>
          <el-table-column prop="deptName" label="部门名称" width="180"/>
          <el-table-column prop="mobile" label="手机号码" width="180"/>
          <el-table-column prop="status" label="状态 " width="180">
            <template #default="scope">
              <span v-if="scope.row.status === 1">正常</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"/>
          <el-table-column label="操作" width="180">
            <template #default="scope">

              <el-button v-permission="'sys:account:edit'" size="small" type="warning" circle :icon="EditPen"
                         @click="handleEdit(scope.$index, scope.row)"></el-button>

              <el-button v-permission="'sys:account:delete'" size="small" type="danger" circle :icon="Delete"
                         @click="handleDelete(scope.$index, scope.row)"></el-button>
              <el-button size="small" type="warning" circle :icon="Key"
                         @click="handleResetPassword(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="sizes,prev, pager, next" :page-sizes="[1, 2, 3, 4]"
                       :total="page.total" v-model:page-size="page.size"
                       v-model:currentPage="page.current" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"/>
      </el-row>
    </el-col>
  </el-row>

  <el-dialog v-model="dialogVisible">
    <mine-account-add :all-dept="deptTreeData" :account-form-data="accountFormData"></mine-account-add>
  </el-dialog>
  <el-dialog v-model="resetDialogVisible" width="30%">
    <mine-reset-password :user-id="userId"></mine-reset-password>
  </el-dialog>
</template>
<script>
import {onMounted, ref, getCurrentInstance} from 'vue'
import {deptList} from '@/api/dept'
import * as accountApi from '@/api/account/index'
import MineAccountAdd from "@/views/account/components/mine-account-add";
import MineResetPassword from "@/views/account/components/mine-reset-password";

const {ElMessage, ElMessageBox} = require("element-plus");
const {Plus, Key, EditPen, Delete} = require("@element-plus/icons-vue/dist/index.mjs");


export default {
  name: "index",
  components: {MineResetPassword, MineAccountAdd},
  setup() {
    const {ctx, proxy} = getCurrentInstance();

    const deptName = ref("")
    const deptTreeData = ref([])
    const queryAccountForm = ref({})
    const createTimeRange = ref([])
    const accountTableData = ref([])
    const accountFormData = ref({})
    const dialogVisible = ref(false)
    const resetDialogVisible = ref(false)
    const userId = ref('')
    const page = ref({
      total: 0,
      pageSize: 1,
      current: 1
    })

    const onQuery = () => {
      if (createTimeRange.value[0]) {
        queryAccountForm.value.startCreateTime = createTimeRange.value[0].format("yyyy-MM-dd HH:mm:ss")
        queryAccountForm.value.endCreateTime = createTimeRange.value[1].format("yyyy-MM-dd HH:mm:ss")
      }
      initAccountTable(queryAccountForm.value)
    }
    const initDeptTree = () => {
      deptList().then(res => {
        if (res.success) {
          deptTreeData.value = res.data
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }
    const handleTreeNodeClick = (node) => {
      queryAccountForm.value.deptId = node.id
      initAccountTable(queryAccountForm.value)
    }
    const handleAddAccount = () => {
      accountFormData.value = {
        parentId: "",
        sort: 1,
        status: 1,
        sex: 2
      }
      dialogVisible.value = true
    }
    const handleEdit = (index, row) => {
      accountFormData.value = row
      dialogVisible.value = true
    }
    const handleDelete = (index, row) => {
      ElMessageBox.confirm(
          '确定要删除当前数据吗？',
          '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
        accountApi.removeById(row.id).then(res => {
          if (res.success) {
            ElMessage({
              message: res.msg,
              type: 'success',
            })
            initAccountTable()
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      }).catch(() => {

      })
    }
    const handleResetPassword = (id) => {
      ElMessageBox.confirm(
          '确认重置当前账号',
          'Warning',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        userId.value = id
        resetDialogVisible.value = true
      })
    }
    const initAccountTable = (params) => {
      accountApi.accountList(params).then(res => {
        if (res.success) {
          accountTableData.value = res.data.records
          page.value.current = res.data.current
          page.value.pageSize = res.data.size
          page.value.total = res.data.total
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }

    const handleCurrentChange = (current) => {
      page.value.current = current
      initAccountTable(page.value)
    }

    const handleSizeChange = (size) => {
      page.value.size = size
      initAccountTable(page.value)
    }

    proxy.$bus.on('submitAccountSuccess', data => {
      dialogVisible.value = false
      resetDialogVisible.value = false
      initAccountTable()
    })
    proxy.$bus.on('cancelAccountDialog', data => {
      dialogVisible.value = false
      resetDialogVisible.value = false
    })

    onMounted(() => {
      initDeptTree()
      initAccountTable(page.value)
    })
    return {
      page,
      Plus,
      EditPen,
      Delete,
      Key,
      userId,
      deptName,
      deptTreeData,
      dialogVisible,
      createTimeRange,
      accountFormData,
      queryAccountForm,
      accountTableData,
      resetDialogVisible,
      onQuery,
      handleEdit,
      handleDelete,
      handleAddAccount,
      handleResetPassword,
      handleTreeNodeClick,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>

</style>
